<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>指令对象的replace和templateUrl</title>
    <script type="text/javascript" src="js/1.4.8/angular.js"></script>
    <script type="text/ng-template" id="tpl">
        <div>这是一个模板元素中的内容</div>
    </script>
</head>
<body>
    <div ng-controller="myCtrl">
        Element：<br>
        <ts-hello></ts-hello><br>
        Attribute:<br>
        <div ts-hello></div>
        <br>
        Class:<br>
        <div class="ts-hello"></div><br>
        Default:<br>
        <div data-ts-hello></div>
    </div>

    <script type="text/javascript">
        var app = angular.module("app", []);

        // 注射器加载完所有模块时，此方法执行一次
        app.run(function ($templateCache) {
            $templateCache.put("cache","<div>这是一个模板缓存中的内容</div>")
        });

        // 定义指令（驼峰式写法）
        app.directive("tsHello",function () {
            return{
                restrict:"ACE",
                //templateUrl:'tpl.html',
                //templateUrl:'tpl',
                templateUrl:'cache',
                replace:true
            }
        });
        
        app.controller("myCtrl",["$scope",function ($scope) {

        }]);
    </script>
</body>
</html>